<template>
  <mars-dialog :draggable="true" :width="380" :height="500" title="设置" right="10" top="10">
    <div class="f-mb">
      <a-space>
        <a-checkbox v-model:value="isInteractive" :options="modelOptions" @change="onCheckBoxChange" title="显示图层内所有矢量数据列表"
          >二三维联动
        </a-checkbox>
      </a-space>
    </div>
    <div class="f-mb">
      <a-form-item label="左侧视图" v-if="isInteractive">
        <mars-select v-model:value="modeLeft" :options="modelOptions" @change="onSelectLeftChange"></mars-select>
      </a-form-item>
      <a-form-item label="右侧视图" v-if="isInteractive">
        <mars-select v-model:value="modeRight" :options="modelOptions" @change="onSelectRightChange"></mars-select>
      </a-form-item>
    </div>
  </mars-dialog>
</template>

<script setup>
import { ref, toRaw, watch } from "vue"
import * as mapWork from "./map.js"
import useLifecycle from "@/common/uses/use-lifecycle"
import { useStore } from "vuex"

const store = useStore()

// 下拉列表数据
const modelOptions = [
  {
    value: "2",
    label: "2D"
  },
  {
    value: "3",
    label: "3D"
  }
]

const isInteractive = ref(false)
const onCheckBoxChange = (val) => {
  const checked = toRaw(val).target.checked
  isInteractive.value = checked
  store.commit("setting/setIsInteractive", checked)
}

const modeLeft = ref(3)
const modeRight = ref(2)

const onSelectLeftChange = (v) => {
  window?.$dmap?.changeSceneMode(Number(v))
}

const onSelectRightChange = (v) => {
  window?.$leftDmap?.changeSceneMode(Number(v))
}

// 启用map.ts生命周期
useLifecycle(mapWork)
const showSatellite = () => {
  const selectedKeys = ref([])
  selectedKeys.value = []
  mapWork.showSatellite()
}

const showCzmlPoint = () => {
  mapWork.showCzmlPoint()
}

const showWebSocketCzml = () => {
  mapWork.showWebSocketCzml()
}
</script>

<style scoped lang="less"></style>
